<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="600"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <div style="padding: 10px">
      <el-descriptions :column="1" border class="custom-descriptions">
        <el-descriptions-item :label="t('business.order.tranId')">{{order.tranId}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.userName')">{{order.userName}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.chargerDn')">{{order.chargerDn}} ({{t('business.order.gunNo')}}:{{order.gunNo}})</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.chargeMinute')">{{order.chargeMinute}}{{t('common.unit.minute')}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.totalQuantity')">{{order.totalQuantity}}{{t('common.unit.price')}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.stopReason')">{{order.stopReason}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.state')"><DictTag :options="OrderStateEnum" :value="order.state" /></el-descriptions-item>
      </el-descriptions>
      <br />
      <el-descriptions :column="1" border class="custom-descriptions">
        <el-descriptions-item :label="t('business.customer.balanceAmount')">{{customer.balanceAmount}}</el-descriptions-item>
      </el-descriptions>
      <br />

      <el-descriptions :column="1" border class="custom-descriptions">
        <el-descriptions-item :label="t('business.order.elecAmount')">{{order.elecAmount}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.serviceAmount')">{{order.serviceAmount}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.parkAmount')">{{order.parkAmount}}</el-descriptions-item>
        <el-descriptions-item :label="t('business.order.orderAmount')">{{order.orderAmount}}</el-descriptions-item>
      </el-descriptions>
      <br />

      <el-form label-width="120px" :model="form" ref="formRef">
        <el-row>
          <el-col :span="24">
            <el-input type="textarea" rows="2" v-model="form.note" :placeholder="t('crud.table.column.note')" />
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">{{t('crud.cancelText')}}</el-button>
      <el-popconfirm :title="t('business.order.tooltip.settle')" @confirm="handleSubmit">
        <template #reference>
          <el-button type="primary" :loading="state.loading">{{t('business.order.action.settle')}}</el-button>
        </template>
      </el-popconfirm>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import {getDetail as customerDetail} from '@/api/business/customer'
import { orderSettle} from '@/api/business/order'
import {useI18n} from 'vue-i18n'
import {ComponentInternalInstance} from 'vue'
const { t } = useI18n()
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { OrderStateEnum } = toRefs<any>(proxy?.useEnum('order_state_enum'))

const emits = defineEmits(['success'])

const state = reactive({
  visible: false,
  loading: false,
  title: t('business.order.action.orderSettle'),
})

const order = ref<any>()
const customer = ref<any>({})

const form = ref<any>({
  id: undefined,
  note: '',
})


const openDialog = (row?: any) => {
  state.visible = true

  console.log(row)
  order.value = Object.assign({}, row)
  form.value = { id: row.id, note: ''}
  loadCustomer()
}

const handleClose = () => {
  state.visible = false
}

const loadCustomer = () => {
  customerDetail(order.value?.customerId).then((res)=>{
    customer.value = res.data
  }).catch((e)=>{
    console.log(e)
  })
}

const handleSubmit = () => {
  state.loading = true
  orderSettle(form.value).then((res)=>{
    ElMessage.success(t('operate.tooltip.success'))
    handleClose()
    emits('success', res)
  }).catch((e)=>{
    console.log(e)
  }).finally(()=>{
    state.loading = false
  })
}

const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})
</script>

<style>
.custom-descriptions .el-descriptions__label {
  width: 200px;
  text-align: right;
}
</style>
